<template>
  <HeadContainer
    class="mine-earn-withdrawal-request bg-background"
    :title="$t('title.wdrlHist')"
    @back="() => emits('toPage', 2, 'earnings')"
  >
    <div class="gap-col-16">
      <div v-if="errorMsg" class="text-start err-msg font-size-14 font-weight-400 line-height-120 text-primary-x">
        {{ errorMsg }}
      </div>
      <div v-for="(list, index) in lists" :key="index" class="border-b pb-4 d-flex flex-row justify-space-between">
        <div class="d-flex">
          <div class="d-flex flex-column mr-2 font-size-14 font-weight-400 text-graydisabled gap-col-8">
            <div>{{ $t('info.wdrReq.date') }}</div>
            <div>{{ $t('info.wdrReq.amount') }}</div>
            <!-- <div>{{ $t('info.wdrReq.withDrawType') }}</div> -->
          </div>
          <div class="d-flex flex-column font-size-14 font-weight-400 gap-col-8">
            <div>{{ formatDate(list?.created_at) }}</div>
            <div>${{ formatMoney(list?.amount) }}</div>
            <!-- <div>{{ cardTypeShow(list?.type) }}</div> -->
          </div>
        </div>
        <div class="d-flex flex-column align-start gap-col-8">
          <div class="d-flex flex-row justify-center align-center">
            <div class="mr-2 d-flex flex-column mr-2 font-size-14 font-weight-400 text-graydisabled">
              {{ $t('info.wdrReq.state') }}
            </div>
            <div class="d-flex justify-center align-center">
              <button class="state-btn" :class="statusClass(list?.status)">
                {{ statusShow(list?.status) }}
              </button>
            </div>
          </div>
          <!-- <div class="d-flex flex-row align-center">
            <div class="mr-2 d-flex flex-column mr-2 font-size-14 font-weight-400 text-graydisabled">
              {{ $t('info.wdrReq.cardNum') }}
            </div>
            <div class="d-flex justify-center align-center font-size-14 font-weight-400">
              {{ formatCardNumber(list?.card_number) }}
            </div>
          </div> -->
        </div>
      </div>
    </div>
    <div v-if="!loading && lists.length === 0" class="d-flex justify-center align-center h-100">
      <ErrorNodata></ErrorNodata>
    </div>
    <div v-else>
      <v-container v-intersect="nextPage" class="text-center py-2">
        <div v-if="loading" class="loading font-size-14 font-weight-400 line-height-140 text-center">
          {{ $t('common.loading') }}
        </div>
        <div v-if="noMore" class="no-more font-size-14 font-weight-400 line-height-140 text-center">
          {{ $t('common.noMore') }}
        </div>
      </v-container>
    </div>
  </HeadContainer>
</template>

<script setup>
import { computed, onActivated, onMounted } from 'vue'
import { $t } from '@/i18n'
import ErrorNodata from '@/components/common/ErrorNodata.vue'
import HeadContainer from '@/components/layout/HeadContainer.vue'
import { useInfinite } from '@/compositions/request/infinite'
import { WITHDRAW_LIST_STATUS, WITHDRAW_TYPE } from '@/constant'
import API from '@/http'

const emits = defineEmits(['toPage'])

const {
  dataList: lists,
  loading,
  noMore,
  errorMsg,
  init,
  refresh,
  nextPage,
} = useInfinite({ request: API.Withdraw.list })

onMounted(init)
onActivated(refresh)

const statusClass = (status) => {
  switch (status) {
    case WITHDRAW_LIST_STATUS.PAID:
      return 'paid'
    case WITHDRAW_LIST_STATUS.NOT_REVIEWED:
      return 'not-reviewed'
    case WITHDRAW_LIST_STATUS.UNDER_REVIEW:
      return 'under-review'
    default:
      return 'fail'
  }
}
const statusShow = computed(() => {
  return (status) => {
    switch (status) {
      case WITHDRAW_LIST_STATUS.PAID:
        return $t('info.paid')
      case WITHDRAW_LIST_STATUS.NOT_REVIEWED:
        return $t('info.notReviewed')
      case WITHDRAW_LIST_STATUS.UNDER_REVIEW:
        return $t('info.underReview')
      default:
        return $t('info.auditFailure')
    }
  }
})

const cardTypeShow = computed(() => {
  return (type) => {
    switch (type) {
      case WITHDRAW_TYPE.BANK_CARD:
        return $t('label.earnIndex.bankCard')
      case WITHDRAW_TYPE.PAYPAL:
        return $t('label.earnIndex.paypal')
      default:
        return $t('label.earnIndex.other')
    }
  }
})
const formatMoney = (money) => {
  return money.toLocaleString()
}
const formatDate = (date) => {
  return date.slice(0, 10)
}
const formatCardNumber = (number) => {
  if (!number) return ''
  const maskedNumber = number.substring(0, 4) + '********' + number.substring(12)
  return maskedNumber
}
</script>

<style lang="scss" scoped>
.state-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 100%;
  padding: 0.1875rem 0.5rem;
  border-radius: 50px;
  width: fit-content;

  // 1 已支付
  &.paid {
    background: linear-gradient(
      180deg,
      rgb(var(--v-theme-primary-gradient-from)) 0%,
      rgb(var(--v-theme-primary-gradient-to)) 100%
    );
  }
  // 15 尚未審核
  &.not-reviewed {
    background: rgb(var(--v-theme-primary-x-reviewed));
  }
  // 10 審核失敗
  &.fail {
    background: rgb(var(--v-theme-subtitle-x));
  }
  // 5 審核中
  &.under-review {
    background: rgb(var(--v-theme-info-x));
  }
}
</style>
